<template>

    <div style="height: 100%;padding:10px;box-sizing: border-box;background:#fff;position:relative;">

        <el-menu v-if="$route.path.includes('main')" :default-active="$route.path + '?type=' + $route.query.type" router
            class="el-menu-vertical-demo" style="height:100%">
            <el-menu-item index="/main?type=all">
                <el-icon>
                    <Grid />
                </el-icon>全部
            </el-menu-item>
            <el-menu-item index="/main?type=video">
                <el-icon>
                    <VideoCameraFilled />
                </el-icon>视频
            </el-menu-item> <el-menu-item index="/main?type=music">
                <el-icon>
                    <Headset />
                </el-icon>音频
            </el-menu-item> <el-menu-item index="/main?type=image">
                <el-icon>
                    <PictureFilled />
                </el-icon>图片
            </el-menu-item>

            <el-menu-item index="/main?type=others">
                <el-icon>
                    <MoreFilled />
                </el-icon>其他
            </el-menu-item>
        </el-menu>

        <el-button type="primary" plain style="width: 100%;" v-if="$route.path.includes('wdfx')">分享记录</el-button>
        <div style="width: 100%;" v-if="$route.path.includes('hsz')">
            <el-button type="primary" plain style="width: 100%;">删除的文件</el-button>
        </div>

        <div style="position: absolute;left:10px;bottom:10px;width:95%">
            <div class="useTitle">空间使用</div>
            <el-progress :percentage="percentage" />
            <div class="useTitle">
                <div>{{ size.sizetoStr(spacedata.useSpace) }}/{{ size.sizetoStr(spacedata.totalSpace) }}</div>
                <div></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import service from '@/utils/Request';
import { onMounted, ref } from 'vue';
import size from "@/utils/utils"

const spacedata = ref({})
const percentage = ref(null);
const getUseSpace = async () => {
    const res = await service.get("/getUseSpace");
    console.log(res)
    spacedata.value = res.data;


    percentage.value = ((res.data.useSpace / res.data.totalSpace) * 100).toFixed(2)

}
defineExpose({
    getUseSpace
})

</script>
<style>
.useTitle {
    font-size: 13px;
}
</style>